<template>
  <el-container>
    <el-aside :style="{ width: collapse ? '64px' : '250px' }">
      <nav-sider-bar :collapse="collapse"/>
    </el-aside>
    <el-container>
      <el-header>
        <header-bar/>
      </el-header>
      <el-container>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>
          <footer-bar/>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import HeaderBar from '@/components/layout/HeaderBar'
import NavSiderBar from '@/components/layout/NavSiderBar'
import FooterBar from '@/components/layout/FooterBar'

export default {
  name: 'index',
  components: {
    HeaderBar,
    NavSiderBar,
    FooterBar,
  },
  data () {
    return {}
  },
  beforeUpdate () {
    this.$store.commit('menu/setRoute', this.$route.matched)
  },
  mounted () {
    this.$store.commit('menu/setRoute', this.$route.matched)
  },
  computed: {
    collapse () {
      return this.$store.getters['menu/getCollapse']
    },
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;

  .el-aside {
    display: flex;
    flex-direction: column;
  }

  .el-container {
    .el-header {
      padding: 0;
    }

    .el-container {
      background-color: #e9eef3;

      .el-main {
        margin: 0.5rem !important;
        background-color: #fff;
      }

      .el-footer {
        text-align: center;
      }
    }
  }
}
</style>